<template>
  <div class="user-edit">
    <Drawer :title="title" v-model="visible" width="1200" :mask-closable="false">
      <Form ref="contractForm" :model="contractForm" :label-width="140" :rules="contractFormValidate">
        <Row :gutter="64">
          <Col span="12">
            <FormItem label="项目名称" prop="project_id" v-show="type=='1'">
              <Select v-model="contractForm.project_id" clearable filterable  @on-change="getContractName">
                <Option v-for="item in projectName" :value="item.id" :key="item.id">{{ item.project_name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="合同编号" prop="contract_code">
              <Input v-model="contractForm.contract_code" placeholder="请输入合同编号"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="合同名称" prop="" v-show="type=='2'">
              <Input v-model="contractForm.contract_name" placeholder="请输入合同编号"/>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="64">
          <Col span="12">
            <FormItem label="发包方式" prop="award">
              <Select v-model="contractForm.award" clearable filterable>
                <Option v-for="item in contractAward" :value="item.name_id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="签订日期" prop="contract_date">
              <DatePicker :value="contractForm.contract_date" type="date"
                placeholder="请选择日期"
                @on-change="getContractDate"
                style="width: 360px"></DatePicker>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="64">
          <Col span="12">
            <FormItem label="工程期限" prop="contract_limit_date">
              <DatePicker type="daterange" placement="top-start"
                placeholder="请选择工期" @on-change="getContractLimitDate"
                :value="contractForm.contract_limit_date"
                style="width: 410px"></DatePicker>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="合同价款" prop="cost">
              <Input v-model="contractForm.cost" style="width: 260px;"/>元
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="64">
           <Col span="24">
              <FormItem label="工程规模和范围" prop="situation">
                <Input v-model="contractForm.situation" type="textarea"/>
              </FormItem>
           </Col>
        </Row>
        <Row :gutter="64">
          <Col span="24">
            <FormItem label="付款方式">
              合同签订生效后，拨付合同总价的<Input v-model="contractForm.race" size="small" type="number" style="width: 60px;"/>%,计
              <Input v-model="contractForm.first_pay" size="small" type="number" style="width: 100px;"/>元，其余视工程进展情况拨付。工程完工验收后，一次性付给承包方合同金额的剩余款项。
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="64">
           <Col span="24">
              <FormItem label="发票类型及税率" prop="tax">
                工程完结后，乙方以<Input v-model="contractForm.tax_race" size="small" type="number" style="width: 60px;"/>%的税率给甲方开具
                <Select v-model="contractForm.ticket_type" clearable filterable size="small" style="width: 200px;">
                  <Option v-for="item in ticketType" :value="item.name_id" :key="item.id">{{ item.name }}</Option>
                </Select>发票。
              </FormItem>
           </Col>
        </Row>
        <Row :gutter="64">
           <Col span="12">
              <FormItem label="合同份数" prop="tax">
                本合同一式<Input v-model="contractForm.total" size="small" type="number" style="width: 60px;text-align: center"/>份，甲方
                <Input v-model="contractForm.part_a_count" size="small" type="number" style="width: 60px;text-align: center" />份，乙方
                <Input v-model="contractForm.part_b_count" size="small" type="number" style="width: 60px;text-align: center" />份
              </FormItem>
           </Col>
           <Col span="12">
            <FormItem label="工程性质" prop="type">
              <Select v-model="contractForm.type" clearable filterable>
                <Option value="新建" >新建</Option>
                <Option value="改造" >改造</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="64">
          <Col span="12">
            <FormItem label="甲方名称" prop="part_b">
              {{ partBName.name }}
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="甲方银行帐户" prop="part_b_bank_id">
              <Select v-model="contractForm.part_b_bank_id" clearable filterable>
                <Option v-for="item in partBBankAccount" :value="item.id" :key="item.id">{{ item.bank_name }}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="64">
          <Col span="12">
            <FormItem label="乙方名称" prop="part_a">
              <Select v-model="contractForm.part_a" clearable filterable @on-change="getPartAAccount">
                <Option v-for="item in partAList" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="乙方银行帐户" prop="part_a_bank_id">
              <Select v-model="contractForm.part_a_bank_id" clearable filterable>
                <Option v-for="item in partABankAccount" :value="item.id" :key="item.id">{{ item.bank_name }}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button @click="handleCancel" style="margin-right: 36px;">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submit">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { getProject, getContractType, getPartB, getBankAccount, getFacilitator, insertFacilitatorContract, updateFacilitatorContract } from '@/api/contract';
import { parse } from 'date-fns/esm';
export default {
  name: 'add-edit-project',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
    type: {
      /**
       * '2': 编辑项目合同
       * '1': 添加项目合同
       */
      type: String,
      default: "0"
    }
  },
  data() {
    return {
      visible: this.value,
      title: "",
      height: 540,
      submitLoading: false,
      contractForm: {},
      projectName: [],
      contractAward: [],
      ticketType: [],
      contractFormValidate: {
        contract_code: [
          {required: true, message: "合同编号不能为空", trigger: "blur"}
        ],
        project_content: [
          {required: true, message: "工程概况不能为空", trigger: "blur"}
        ],
        cost: [
          {required: true, message: "合同价款不能为空", trigger: "blur"}
        ]
      },
      partAList: [],
      partABankAccount: [],
      partBName: {},
      partBBankAccount: [],
    }
  },
  methods: {
    getProjectName() {
      getProject().then(res => {
        if (res.code === 0) {
          this.projectName = res.data;
        }
      })
    },
    getContractAward() {
      getContractType({type: 11}).then(res => {
        if (res.code === 0) {
          this.contractAward = res.data;
        }
      });
      getContractType({type: 12}).then(res => {
        if (res.code === 0) {
          this.ticketType = res.data;
        }
      })
    },
    getContractName(v) {
      this.contractForm.contract_name = this.projectName.filter(item => item.id === v)[0].project_name + '劳务承包';
    },
    getContractDate(v) {
      this.contractForm.contract_date = v;
    },
    getContractLimitDate(v) {
      this.contractForm.contract_limit_date = v;
      this.contractForm.start_date = v[0];
      this.contractForm.end_date = v[1];
    },
    getPartAName() {
      getFacilitator().then(res => {
        if (res.code === 0) {
          this.partAList = res.data;
        }
      })
    },
    getPartABankAccount(company_id) {
      const params = {
        company_type: 1,
        company_id
      }
      getBankAccount(params).then(res => {
        if (res.code === 0) {
          this.partABankAccount = res.data;
        }
      })
    },
    getPartAAccount(v) {
      this.getPartABankAccount(v);
    },
    getPartBName() {
      getPartB().then(res => {
        if (res.code === 0) {
          this.partBName = res.data;
        }
      });
    },
    getPartBBankAccount() {
      const params = {
        company_type: 4,
        company_id: 1
      };
      getBankAccount(params).then(res => {
        if (res.code === 0) {
          this.partBBankAccount = res.data;
        }
      })
    },
    
    init() {
      switch(this.type) {
        case '1':
          this.title = '新增工程合同';
          break;
        case '2':
          this.title = '编辑工程合同';
          this.contractForm = this.data;
          this.contractForm.contract_limit_date = [this.data.start_date, this.data.end_date];
          this.getPartABankAccount(this.data.part_b);
          break;
      }
      this.getProjectName();
      this.getContractAward();
      this.getPartAName();
      this.getPartBName();
      this.getPartBBankAccount();
    },
    handleCancel() {
      this.visible = false;
    },
    submit() {
      this.$refs.contractForm.validate(valid => {
        if (valid) {
          switch(this.type) {
            case '1':   // 新增
              this.submitLoading = true;
              this.contractForm.part_b = this.partBName.id;
              insertFacilitatorContract(this.contractForm).then(res => {
                this.submitLoading = false;
                console.log(res);
                if (res.code === 0) {
                  this.$Message.success(res.message);
                  this.$emit("on-submit", true);
                  this.visible = false;
                }
              })
              break;
            case '2':   // 修改
              this.submitLoading = true;
              // delete this.contractForm.contract_code;
              updateFacilitatorContract(this.contractForm).then(res => {
                this.submitLoading = false;
                if (res.code === 0) {
                  this.$Message.success(res.message);
                  this.$emit("on-submit", true);
                  this.visible = false;
                }
              })
              break;
          }
        }
      })
    },
    setCurrentValue(value) {
      this.visible = value;
    },
    
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.init();
      this.$emit("input", value);
      
    }
  },
  mounted() {
    this.height = Number(document.documentElement.clientHeight - 100);
  }
}
</script>
<style lang="less" scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>